<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址导航</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f4f4f9 0%, #e0e0e9 100%);
            margin: 0;
            padding: 30px;
            color: #333;
            /* 隐藏滚动条，适用于Firefox，与 body::-webkit-scrollbar 冲突*/
            /* scrollbar-width: none; */
        }

        /* 隐藏滚动条，适用于WebKit浏览器（如Chrome、Safari） */
        body::-webkit-scrollbar {
            display: none;
        }

        /* 隐藏滚动条，适用于IE和Edge */
        body {
            -ms-overflow-style: none;
        }

        h1 {
            text-align: center;
            font-size: 36px;
            font-weight: 600;
            color: #222;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .categories-container {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .category {
            background-color: #fff;
            border: none;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            flex: 1 1 calc(33.33% - 25px);
            min-width: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 水平居中 */
            will-change: transform;
            /* 硬件加速 */
        }

        .category:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        .category h2 {
            color: #222;
            margin-bottom: 15px;
            font-size: 24px;
            font-weight: 600;
        }

        .category ul {
            list-style-type: none;
            padding: 0;
            width: 100%;
            height: 180px;
            min-height: 176px;
            overflow: auto;
            /* 确保列表占据整个宽度 */
            display: flex;
            flex-wrap: wrap; /* 允许列表项换行 */
            justify-content: center; /* 水平居中 */
            gap: 15px; /* 列表项之间的间距 */
        }

        .category ul::-webkit-scrollbar {
            display: none;
        }

        .category ul li {
            margin-left: 15px;
            margin-right: 15px;
        }

        .category ul li a {
            color: #007BFF;
            text-decoration: none;
            font-size: 18px;
            transition: color 0.3s ease;
        }

        .category ul li a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* 美化回到顶部按钮样式并添加过渡效果 */
        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }

        #back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        #back-to-top:hover {
            background-color: #0056b3;
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* 进一步美化搜索框样式 */
        #search-box {
            text-align: center;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #search-input {
            padding: 12px 20px;
            width: 460px;
            border: 2px solid transparent;
            border-radius: 25px;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            outline: none;
            transition: all 0.3s ease;
            background-color: #fff;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
            background-repeat: no-repeat;
            background-position: 95% center;
            background-size: 20px;
        }

        #search-input:focus {
            border-color: #007BFF;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5), 0 4px 12px rgba(0, 123, 255, 0.3);
            background-color: #f8f9fa;
        }
    </style>
</head>

<body>
<h1>网址导航</h1>
<!-- 搜索框 -->
<div id="search-box">
    <label for="search-input"></label><input type="text" id="search-input" placeholder="搜索网址"
                                             onkeydown="if (event.key === 'Enter') searchSites()">
</div>
<div class="categories-container" id="categories-container"></div>
<!-- 回到顶部按钮 -->
<button id="back-to-top" onclick="scrollToTop()">↑</button>
<script id="site-data">
    // 网址 JSON 数据实例
    const siteData = [
        {
            "category": "搜索引擎",
            "sites": [
                {"name": "百度", "url": "https://www.baidu.com"},
                {"name": "谷歌", "url": "https://www.google.com"}
            ]
        }
    ];
</script>
<script>
    // 获取分类容器
    const categoriesContainer = document.getElementById('categories-container');

    // 动态加载分类和网址
    siteData.forEach(categoryData => {
        const categoryDiv = document.createElement('div');
        categoryDiv.classList.add('category');

        const categoryHeading = document.createElement('h2');
        categoryHeading.textContent = categoryData.category;
        categoryDiv.appendChild(categoryHeading);

        const siteList = document.createElement('ul');
        categoryData.sites.forEach(site => {
            const listItem = document.createElement('li');
            const link = document.createElement('a');
            link.href = site.url;
            link.textContent = site.name;
            listItem.appendChild(link);
            siteList.appendChild(listItem);
        });
        categoryDiv.appendChild(siteList);

        categoriesContainer.appendChild(categoryDiv);
    });
    // 获取回到顶部按钮元素
    const backToTopButton = document.getElementById('back-to-top');

    // 当滚动条向下滚动一定距离时显示回到顶部按钮
    window.onscroll = function () {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    };

    // 点击按钮回到顶部，添加平滑滚动效果
    function scrollToTop() {
        const scrollDuration = 500; // 滚动动画持续时间，单位为毫秒
        const scrollStep = -window.scrollY / (scrollDuration / 15);
        const scrollInterval = setInterval(() => {
            if (window.scrollY !== 0) {
                window.scrollBy(0, scrollStep);
            } else {
                clearInterval(scrollInterval);
            }
        }, 15);
    }

    // 优化后的搜索功能
    function searchSites() {
        const searchTerm = document.getElementById('search-input').value.toLowerCase();
        const allLinks = document.querySelectorAll('.category ul li a');

        // 先处理所有链接的显示与隐藏
        allLinks.forEach(link => {
            const siteName = link.textContent.toLowerCase();
            if (siteName.includes(searchTerm)) {
                link.parentElement.style.display = 'block';
            } else {
                link.parentElement.style.display = 'none';
            }
        });

        // 再处理分类框的显示与隐藏
        const allCategories = document.querySelectorAll('.category');
        allCategories.forEach(category => {
            const visibleLinks = category.querySelectorAll('ul li:not([style="display: none;"]) a');
            if (visibleLinks.length === 0) {
                category.style.display = 'none';
            } else {
                category.style.display = 'flex';
            }
        });
    }
</script>
</body>

</html>
